<template>
  <div class="submitcontain">
    <van-nav-bar
      class="page-nav-bar"
      title="提交订单"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        class="text"
        v-model="content"
        placeholder="请输入留言"
        type="textarea"
        maxlength="140"
        show-word-limit
        size="large"
        :autosize="height"
      />
    </van-cell-group>
    <van-row class="btn">
      <van-col span="4" offset="3" >
        <van-button @click="content = null">取消</van-button>
      </van-col>
      <van-col span="4" offset="11" >
        <van-button @click="msg"  type="primary">确定</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { submit } from "@/api/order";

export default {
  data() {
    return {
      height: {
        minHeight: "150",
      },
      content: "",
    };
  },
  computed: { ...mapState(["order"]) },
  methods: {
    ...mapMutations(["setorderInfo"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    async msg() {
      const { data } = await submit({
        addressId: this.order.id,
        postscript: this.content,
      });
      if (data.errno == 401) {
        this.$toast.fail("请先登录");
      } else if (data.errno == 0) {
        this.$toast.success("提交成功");
        // this.setorderInfo(data.data.orderInfo);
        this.$router.push({
          path: "/pay",
          query: { id: data.data.orderInfo.id },
        });
      } else {
        this.$toast.fail("提交失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.text {
  width: 100%;
  height: 400px;
  font-size: 28px;
}
.btn {
  margin-top: 30px;
  font-size: 28px;
  color: #ea4d17;
}
</style>